<template>
	<view class="container">
		<u-sticky  offsetTop="0" customNavHeight="0">
		<!-- #ifdef MP -->
		  <view class="wx-top" :style="fixHeader1"></view>
		<!-- #endif	 -->
		<view class="header">
			<view class="address" @click="openAddress">
				<u-icon name="map-fill" color="#fff" size="24rpx" class="icon-small1"></u-icon>
				<view class="city">{{presentCity.name}}</view>
				<u-icon name="arrow-down-fill" color="#fff" size="16rpx" class="icon-small2"></u-icon>
			</view>
			<view class="search">
				<u-search placeholder="请输入钓塘名称" color="#549CE3" searchIconColor="#549CE3" :searchIconSize="19" height="54rpx" :showAction="false" :clearabled="true" :inputStyle="{fontSize:'24rpx'}" v-model="where.keyword" @search="handleSearch"></u-search>
			</view>
		</view>
		</u-sticky>
		<!-- begin 轮播图 by cmh -->
		<view class="swiper" v-if="slideImgs.length">
			<swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval"
				:duration="duration" indicator-color="#E4E4E4" indicator-active-color="#549CE3" :current="swiperCur" @change="swiperChange">
				<block v-for="(item, index) in slideImgs" :key="index">
					<swiper-item :class="{ active: index == swiperCur }">
						<view @click="goUrl(item.url)" class="slide-navigator acea-row row-between-wrapper">
							<image :src="item.pic" class="slide-image"></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- end 轮播图 by cmh -->
		<!-- begin 水平滚动tab栏 -->
		<!-- #ifdef MP -->
		  <u-sticky bgColor="#fff" customNavHeight="164rpx">
		<!-- #endif	 -->
		<!-- #ifndef MP -->
		  <u-sticky bgColor="#fff" customNavHeight="82rpx">
		<!-- #endif -->
			<view class="tabs">
				<u-tabs 
				:current="current"
				:scrollable="false"
				:list="headerTabs" 
				@click="onTapTab" 
				:lineWidth="28" 
				lineHeight="4rpx"
				lineColor="#549CE3"
				:activeStyle="{
					color: '#333',
					fontWeight: 'bold',
					fontSize:'26rpx'
				}"
				:inactiveStyle="{
					color: '#606266',
					fontSize:'26rpx'
				}"
				itemStyle="height: 32px;"
				></u-tabs>
			</view>
		</u-sticky>
		<!-- <scroll-view class="header-tab fix-header" :style="fixHeader3" scroll-x scroll-with-animation :scroll-left="scrollLeft">
			<view :class="index==curTab?'tab-item cur-tab':'tab-item'" v-for="(item, index) in headerTabs" :key="index" @click="onTapTab(item, index)">
				{{item.cate_name}}
			</view>
		</scroll-view> -->
		<!-- end 水平滚动tab栏 -->
		
		
		
		<!-- begin 商品列表 -->
		<view class="fishing-list" v-if="fishpondList.length !== 0 && !goodsLoading && loadend">
			<view class="single-wrap" v-for="(item,index) in fishpondList" :key="item.id" @click="navTo(item.id)">
				<view class="left">
					<u-image width="170rpx" height="170rpx" radius="16rpx" :src="item.pic"></u-image>
				</view>
				<view class="right">
					<view class="title-wrap">
						<view class="tag-type">
							{{item.pondType}}
						</view>
						<view class="tit">
							{{item.name}}
						</view>
					</view>
					<view class="fishing-list-address">
						<u-icon name="map-fill" color="#4F4F4F" size="22rpx"></u-icon>
						<view class="f-address">
							{{item.address}}
						</view>
					</view>
					<u-divider
						:dashed="true"
						lineColor="#BBBBBB"
					></u-divider>
					<view class="fishing-list-bottom">
						<view class="flb-left">
							<view class="fish-type">
								<text class="fish" v-for="(fishItem,fIndex) in item.fishType" :key="fIndex">{{fishItem}}</text>
							</view>
							<view class="performance">
								<view class="p-item">
									评分:{{item.score}}
								</view>
								<view class="p-item">
									销量:{{item.sales}}
								</view>
							</view>
						</view>
						<view class="flb-right">
							<u-button text="前往购票" color="#F9BC3D" shape="circle" size="small"></u-button>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="loadStatus" height="100" fontSize="24rpx" @loadmore="loadmore()"/>
		</view>
		<view class="loading">
			<u-loading-icon :show="goodsLoading && !loadend" text="正在加载…" textSize="26rpx" size="38rpx"></u-loading-icon>
		</view>
		<!-- <emptyPage v-if="fishpondList.length == 0 && !goodsLoading" title="暂无商家~"></emptyPage> -->
		<view class="empty" v-if="fishpondList.length == 0 && !goodsLoading && loadend">
			<u-empty
				mode="data"
				icon="https://crmeb-test.zhidiaotianxia.com/uploads/def/20250114/17be10d575841cfbf428f9e0ad4e1cae.png"
				text="暂无商家"
			>
			</u-empty>
		</view>
		
		<!-- <view v-if="goods.length" class="goods-wrap" id="goods" @touchmove="onTouchmove">
			<view class="goods">
				<WaterfallsFlow :wfList='goods' @itemTap="goGoodsDetail" :type="1" :isStore="1"/>
			</view>
		</view>
		<view v-if="goodsLoading" class="acea-row row-center-wrapper loadingicon">
			<text :hidden="!goodsLoading" class="iconfont icon-jiazai loading"></text>
			{{loadTitle}}
		</view>
		<emptyPage v-if="goods.length == 0 && !goodsLoading" title="暂无商品~"></emptyPage> -->
		<!-- end 商品列表 -->
		
		<!-- <view class="empty-box" v-if="fishpondList.length==0">
			<image src="/static/images/empty-box.png"></image>
			<view class="txt">暂无商户</view>
		</view> -->
		<!-- begin城市选择 -->
		<liu-customize-scroll ref="scroll" isGrid @change='chooseSuccess' :cityList="cityList"></liu-customize-scroll>
		<!-- end城市选择 -->
		<!-- begin -->
		<u-popup :show="showFilter" mode="right"  @close="showFilter = false" :safeAreaInsetTop="true">
		        <view class="fishpond">
		           <view class="title">
						钓场类型
		           </view>
				   <view class="fishpond-type-list">
						<view class="single-ft" :class="ftItem.id === fishpondTypeActive?'active':''" v-for="(ftItem,ftIndex) in fishpondTypeList" :key="ftIndex" @click="fishpondTypeActive = ftItem.id">
							{{ftItem.name}}
						</view>
						<!-- <view class="single-ft active">
							黑坑
						</view>
						<view class="single-ft">
							农家乐
						</view>
						<view class="single-ft">
							钓场
						</view>
						<view class="single-ft">
							湖库
						</view> -->
				   </view>
				   <view class="wrap-btn">
						<view class="btn btn1">
							重置
						</view>
						<view class="btn btn2" @click="searchFishpondType()">
							确定
						</view>
				   </view>
		        </view>
			</u-popup>
	</view>
</template>
<script>

// begin 顶部状态栏 
let sysHeight = uni.getSystemInfoSync().statusBarHeight;
// end 顶部状态栏 

import { HTTP_REQUEST_URL } from '@/config/app';
	
// begin 轮播图 by cmh
import { getHotBanner } from '@/api/store.js';
// end 轮播图 by cmh

// begin 商品列表
import { getCategoryList } from '@/api/store.js';
import { getArea,storeMerchantList, getGeocoder } from '@/api/store.js';
import { goShopDetail } from '@/libs/order.js';
// end 商品列表
export default {
	data() {
		return {
			keyword:'',//搜索框内容
			cityList:[
				/* {
					value: '110000',
					label: '北京市',
					children: [
					  {
						value: '110100',
						label: '北京市',
					  },
					]
				  },
				  {
					value: '120000',
					label: '天津市',
					children: [
					  {
						value: '120100',
						label: '天津市',
					  },
					]
				} */
			],//选择区域数据
			presentCity:{
				id:null,
				name:'--市'
			},//当前选择城市
			showFilter:false,//筛选菜单显示
			fishpondTypeList:[
				{
					id:0,
					name:'全部',
				},
				{
					id:1,
					name:'黑坑',
				},
				{
					id:2,
					name:'农家乐',
				},
				{
					id:3,
					name:'钓场',
				},
				{
					id:4,
					name:'湖库',
				}
			],
			fishpondTypeActive:null,//筛选选中项id
			domain: HTTP_REQUEST_URL,//当前域名
			sysHeight: sysHeight,//顶部状态栏高度
			
			// begin 水平滚动tab栏
			// curTab: 0, // 当前选择
			current:0,//当前tabs选中项索引
			headerTabs:[
				{
					name: "距离",
					store_category_id: 0
				},
				{
					name: " 销量",
					store_category_id: 1
				},
				{
					name: "好评",
					store_category_id: 2
				},
				{
					name: " 关注",
					store_category_id: 3
				},
				// {
				// 	name: " 筛选",
				// 	store_category_id: 4
				// },
			],
			scrollLeft: 0, // 初始滚动条位置
			// end 水平滚动tab栏
			
			// begin 轮播图 by cmh
			slideImgs: [],
			swiperCur: 0,
			circular: true,
			autoplay: true,
			interval: 3000,
			duration: 500,
			// end 轮播图 by cmh
			
			// begin 商品列表
			goodsLoading: false,
			loadend:false,
			// loading:false,
			// loadTitle: '加载更多',
			loadStatus: 'loadmore',
			where: {
				// order: '',//筛选类型
				keyword: '',//搜索关键词
				page: 1,//分页
				limit: 15,//单页数量
				category_id:1,//商户分类，钓场为1
				location:'',//当前用户的坐标用于距离排序，用英文逗号分割 lat,long
				name_loc:'',//用户点击的区域名称
			},
			total:0,//总商户数
			// goods: [],
			//列表数据
			fishpondList:[
				/* {
					id:6,
					pic:'/static/pic/avatar.png',
					pondType:'黑坑',
					name:'水上田园',
					address:'深圳市龙华区观澜街道君子布社区环观南路',
					fishType:['鲫鱼','鲢鳙','草鱼'],
					score:'5.0',
					sales:'162'
				},
				{
					id:11,
					pic:'https://cdn.uviewui.com/uview/album/2.jpg',
					pondType:'黑坑',
					name:'众乐钓鱼场',
					address:'深圳市宝安区石岩料坑民生四路南众乐钓鱼场',
					fishType:['鲫鱼','翘嘴','草鱼'],
					score:'4.8',
					sales:'68'
				},
				{
					id:12,
					pic:'https://cdn.uviewui.com/uview/album/3.jpg',
					pondType:'农家乐',
					name:'湖尔美农庄钓鱼场',
					address:'深圳市宝安区西乡街道洲石路宝山园西北500米',
					fishType:['鲫鱼','翘嘴','草鱼'],
					score:'4.8',
					sales:'238'
				} */
			],
			// end 商品列表
		};
	},
	computed: {
		fixHeader1() {
			return `height: ${sysHeight}px; top: 0px`;
		},
		fixHeader2() {
			return `top: ${sysHeight}px; height: 41px`;
		},
		fixHeader3() {
			return `top: ${sysHeight+41}px`;
		}
	},
	
	onLoad(options) {
		
		// begin 轮播图 by cmh
		// 数据在 后台/维护/开发配置/组合数据，以_home_banner结尾的
		// 这里查的是good_home_banner，
		// console.log("getHotBanner ...");
		getHotBanner("good").then(res => {
			// console.log("getHotBanner:", res);
			this.slideImgs = res.data;
		}).catch(res => {
			console.log(res);
		});
		// end 轮播图 by cmh
		
		// getCategoryList().then(res => {
		// 	if(res.data.list && res.data.list.length > 0) {
		// 		let list = res.data.list.filter(item=>item.store_category_id==338);
				
		// 		this.headerTabs = [{
		// 			cate_name: "推荐",
		// 			store_category_id: 0
		// 		}].concat(list[0].children);
		// 	}
		// })
		
		// this.getGoods();
	},
	onShow() {
		this.reset()
		// this.getFishingMerchantData()
		this.init()
	},
	onPullDownRefresh(){},
	onReachBottom() {
		if(this.fishpondList.length >= this.total) return ;
		this.getFishingMerchantData()
	},
	onShareAppMessage() {
	    return {
	      title: '智能鱼护',
	      // imageUrl: '分享图片链接',
	      success() {
			uni.$u.toast('分享成功')
	      },
	      fail(err) {
		    uni.$u.toast('分享失败')
	      }
	    };
	},
	methods: {
		//初始化
		async init(){
			await this.getLocation()
			this.getFishingMerchantData()
			await this.getAreaData()
		},
		//获取定位
		getLocation(){
			// debugger
			let that = this
			return new Promise((resolve,reject) =>{
					uni.getLocation({
						type: 'wgs84',
						success: function (res) {
							let {longitude,latitude} = res
							that.where.location = `${latitude},${longitude}`
							resolve();
						},
						complete:function(err) {
							resolve();
						}
					});
			});
		},
		//获取获取区域城市数据
		getAreaData(){
			return new Promise((resolve,reject) =>{
				getArea().then(res=>{
					//修改返回的数据结构
					let {data} = res
					let parentArr = data.filter(item=>item.level === 1)
					parentArr.forEach(item=>item.children = [])
					let childrenArr = data.filter(item=>item.level === 2)
					childrenArr.forEach(item=>{
						let fIndex = parentArr.findIndex(pItem=>pItem.id === item.parent_id)
						parentArr[fIndex].children.push(item)
					})
					this.cityList = parentArr.map(item=>{
						let newArr = {
							value:item.id,
							label:item.name,
							children:item.children.map(cItem=>({value:cItem.id,label:cItem.name}))
						}
						return newArr
					})
					resolve();
				})
			});
		},
		//获取商家列表
		getFishingMerchantData(){
			let that = this;
			if (that.loadend) return;
			// if (that.loading) return;
			if (that.goodsLoading) return;
			that.goodsLoading = true;
			that.loadend = false
			let params = {...that.where}
			that.loadStatus = 'loading'
			storeMerchantList(params).then(res=>{
				that.goodsLoading = false;
				that.loadend = true
				let {count,list} = res.data
				that.total = count
				let newList = list.map(item=>{
					let {mer_id,mer_avatar,mer_name,mer_address,name_loc} = item
					let obj = {
						id:mer_id,
						pic:mer_avatar,
						pondType:'黑坑',
						name:mer_name,
						address:mer_address,
						fishType:['鲫鱼','翘嘴','草鱼'],
						score:'4.8',
						sales:'238',
						name_loc
					}
					return obj
				})
				that.fishpondList = that.fishpondList.concat(newList) 
				let loadend = that.fishpondList.length >= that.total;
				if(loadend) {
					that.loadStatus = 'nomore'
				}else{
					that.loadStatus = 'loadmore'
					that.where.page++
				}
				/* debugger
				let aaa = that.fishpondList*/
				that.presentCity.name = that.fishpondList[0].name_loc 
			}).catch(err=>{
				that.loadStatus = 'nomore'
				that.goodsLoading = false;
				that.loadend = true
			})
		},
		//点击加载更多
		loadmore(){
			if(this.fishpondList.length >= this.total) return ;
			this.getFishingMerchantData()
		},
		//搜索钓场
		handleSearch(val){
			this.where.page = 1;
			this.fishpondList = []
			this.where.location = ''
			this.loadend = false
			this.getFishingMerchantData()
		},
		//打开地址选择器
		openAddress() {
			this.$refs.scroll.open()
		},
		//地址选择成功
		chooseSuccess(e) {
			let name = '--'
			const {label,value} = e.value[0].children[0]
			if(label === "市辖区")name = e.value[0].label
			else name = label
			this.presentCity.name = name
			this.presentCity.id = value
			this.reset()
			this.getFishingMerchantData();
		},
		//重置钓场列表
		reset(){
			this.current = 0;
			this.fishpondList = [];
			this.where = {
				// order: '',//筛选类型
				keyword: '',//搜索关键词
				page: 1,//分页
				limit: 15,//单页数量
				category_id:1,//商户分类，钓场为1
				location:'',//当前用户的坐标用于距离排序，用英文逗号分割 lat,long
				name_loc:this.presentCity.name === '--市'?'': this.presentCity.name,//用户点击的区域名称
			}
			this.loadStatus = "loadmore"
			this.goodsLoading = false;
			this.loadend = false
		},
		// begin 轮播图 by cmh
		swiperChange(e) {
			// this.swiperCur = e.detail.current
			let {
				current,
				source
			} = e.detail;
			if (source === 'autoplay' || source === 'touch') {
				//根据官方 source 来进行判断swiper的change事件是通过什么来触发的，autoplay是自动轮播。touch是用户手动滑动。其他的就是未知问题。抖动问题主要由于未知问题引起的，所以做了限制，只有在自动轮播和用户主动触发才去改变current值，达到规避了抖动bug
				this.swiperCur = e.detail.current;
			}
		},
		// end 轮播图 by cmh
		//切换筛选
		onTapTab({name,index}) {
			if(index === 4){
				this.showFilter = true
				return
			}
			this.reset()
			this.current = index;
			// this.where.order = index
			this.getFishingMerchantData();
		},
		//筛选钓场类型
		searchFishpondType(){
			this.reset()
			this.current = 4
			let fishpondTypeActive = this.fishpondTypeActive//筛选钓场类型选中id
			this.showFilter = false
			this.getFishingMerchantData();
		},
		// 前往购票
		navTo(id){
			uni.navigateTo({
				url:'/pages/store/fishpond/index?storeID='+id
			})
		},
	}	
};
</script>
<style lang="scss" scoped>
	$wrapMargin: 20rpx;
	.container{
		.wx-top{
			background-color:#549CE3;
			width: 100%;
		}
		.header{
			position: sticky;
			background-color:#549CE3;
			z-index: 1;
			display: flex;
			align-items: center;
			height: 82rpx;
			.address{
				display: flex;
				align-items: center;
				margin-left: 20rpx;
				.icon-small1{
					transform: scale(.8);
					margin-top: 6rpx;
				}
				.icon-small2{
					transform: scale(.8);
					margin-top: 8rpx;
				}
				.city{
					color: #FFFFFF;
					font-size: 26rpx;
					margin-left: 6rpx;
					margin-right: 4rpx;
					max-width: 110rpx;
					overflow: hidden;
					text-overflow: ellipsis;    
					white-space: nowrap;
				}
			}
			.search{
				margin-left: 20rpx;
				width: 350rpx;
			}
		}
		.fishing-list{
			padding: 20rpx $wrapMargin;
			/deep/ .u-divider{
				margin: 6px 0 !important;
			}
			/deep/ .u-button--small{
				height: 25px;
				min-width: 130rpx;
			}
			.single-wrap{
				display: flex;
				background-color: #FFFFFF;
				border-radius: 8px;
				box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.05);
				padding: 20rpx 30rpx 20rpx 20rpx;
				margin-bottom: 16rpx;
				.left{
					
				}
				.right{
					flex:1;
					margin-left: 16rpx;
					margin-top: 4px;
					.title-wrap{
						display: flex;
						align-items: center;
						.tag-type{
							background-color: #549CE3;
							color: #FFFFFF;
							font-size: 24rpx;
							padding: 4rpx 16rpx;
							transform: scale(.86);
							border-radius: 4px;
						}
						.tit{
							font-size: 30rpx;
							color: #333333;
							font-weight: bold;
							margin-left: 4rpx;
						}
					}
					.fishing-list-address{
						display: flex;
						align-items: center;
						margin-top: 5px;
						.f-address{
							width: 450rpx;
							font-size: 24rpx;
							color: #333333;
							overflow: hidden;    
							text-overflow: ellipsis;    
							white-space: nowrap;
							margin-left: 2rpx;
						}
					}
					.fishing-list-bottom{
						display: flex;
						align-items: center;
						.flb-left{
							flex: 1;
							.fish-type{
								display: flex;
								.fish{
									margin-right: 16rpx;
									font-size: 24rpx;
									color: #333333;
								}
							}
							.performance{
								font-size: 24rpx;
								display: flex;
								margin-top: 2px;
								.p-item{
									color: #9A9A9A;
									margin-right: 30rpx;
								}
							}
						}
						.flb-right{}
					}
				}
			}
		}
		.empty{
			padding-top: 100rpx;
		}
		.loading{
			// padding-top: 300rpx;
		}
		.fix-header {
			position: sticky;
			background-color:#549CE3;
			z-index: 1;
			
		}
		
		.header-search {
			width: 530rpx;
			height: 80rpx;
			// position: relative;
			z-index: 1;
			padding: 10rpx 20rpx 20rpx 20rpx;
			.search {
				flex: 1;
				display: flex;
				align-items: center;
				min-width: 0;
				height: 58rpx;
				border-radius: 29rpx;
				margin-left: 32rpx;
				background-color: #FFFFFF;
				font-weight: 500;
				font-size: 26rpx;
				color: #999999;
				.iconfont {
					margin-right: 13rpx;
					margin-left: 30rpx;
					font-size: 24rpx;
				}
			}
		}
		
		// begin 水平滚动tab栏
		.tabs{
			padding: 0 $wrapMargin;
		}
		
		/* .header-tab {
			width: 100vw;
			// position: relative;
			border-bottom: solid 1px #f6f6f6;
			display: flex;
			justify-content: flex-start;
			white-space: nowrap;
			box-sizing: border-box;
			padding: 0rpx 20rpx 10rpx 20rpx;
			
			z-index: 1;
			
			.tab-item {
				display: inline-block;
				padding: 20rpx 20rpx;
			}
			.tab-item.cur-tab {
				font-weight: bolder;
				color: red;
				border-bottom: 4rpx solid red;
			}
			
			.search {
				flex: 1;
				display: flex;
				align-items: center;
				min-width: 0;
				height: 58rpx;
				border-radius: 29rpx;
				margin-left: 32rpx;
				background-color: #FFFFFF;
				font-weight: 500;
				font-size: 26rpx;
				color: #999999;
				.iconfont {
					margin-right: 13rpx;
					margin-left: 30rpx;
					font-size: 24rpx;
				}
			}
		} */
		// end 水平滚动tab栏

		// begin 轮播图 by cmh
		$swiperHeight: 380rpx;
		.swiper {
			background-color: rgb(239, 251, 255);
			// position: relative;
			// top: 98px;
			/* #ifdef MP  */
			height: auto;
			/* #endif */
			/* #ifdef H5 || APP-PLUS */
			height: $swiperHeight;
			/* #endif */
		
			margin: 20rpx $wrapMargin;
			border-radius: 8rpx;
			overflow-x: hidden;
			/* #ifdef MP */
			z-index: 0;
		
			/* #endif */
			swiper,
			.swiper-item,
			image {
				width: 100%;
				height: $swiperHeight;
				border-radius: 10rpx;
			}
		
			.slide-navigator {}
		
			image {
				transform: scale(0.93);
				transition: all 0.6s ease;
			}
		
			swiper-item.active {
				image {
					transform: scale(1);
				}
			}
		}
		// end 轮播图 by cmh
		
		.empty-box{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 200rpx;
			image{
				width: 414rpx;
				height: 240rpx;
			}
			.txt{
				font-size: 26rpx;
				color: #999;
			}
		}
		
		// 侧边筛选
		.fishpond{
			width: 500rpx;
			padding: 30rpx;
			position: relative;
			height: 100%;
			margin-top: 25px;
			.title{
				font-size: 30rpx;
				color:#333333;
				font-weight: bold;
			}
			.fishpond-type-list{
				display: flex;
				flex-wrap: wrap;
				margin-top: 30rpx;
				.single-ft{
					background-color: #f1f1f3;
					font-size: 26rpx;
					padding: 8rpx 30rpx;
					border-radius: 50px;
					margin-right: 18rpx;
					margin-bottom: 10px;
				}
				.active{
					background: #549CE3;
					color: #FFFFFF;
				}
			}
			.wrap-btn{
				position: absolute;
				bottom: 20px;
				display: flex;
				justify-content: space-between;
				width: calc(100% - 60rpx);
				.btn{
					width: 200rpx;
					height: 34px;
					line-height: 34px;
					font-size: 26rpx;
					border-radius: 50px;
					text-align: center;
				}
				.btn1{
					background: #549CE340;
					border: 1px solid #549CE3;
					color: #549CE3;
				}
				.btn2{
					background: #549CE3;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
